<template>
  <div class="daohang_all">
    <div class="bottom">
      <span>
        <router-link to="homeView" class="nav-item">
          <i class="icon1"></i>
          主页
        </router-link>
      </span>
      <span>
        <router-link to="/about" class="nav-item">
          <i class="icon2"></i>
          书架
        </router-link>
      </span>
      <span>
        <router-link to="/huodong" class="nav-item">
          <i class="icon3"></i>
          活动
        </router-link>
      </span>
      <span>
        <router-link to="/geren" class="nav-item">
          <i class="icon4"></i>
          我的
        </router-link>
      </span>
    </div>
    <router-view></router-view>

  </div>

</template>


<style lang="less">
.icon1,
.icon2,
.icon3,
.icon4 {
  background-size: cover;
  width: 20px;
  height: 20px;
  margin-bottom: 5px;
}

.icon1 {
  background-image: url(./img/shouye.png);
}

.icon2 {
  background-image: url(./img/shujia.png);
}

.icon3 {
  background-image: url(./img/collection.png);
}

.icon4 {
  background-image: url(./img/geren.png);
}

.nav-item.router-link-exact-active .icon1 {
  background-image: url(./img/shouye_active.png);
}

.nav-item.router-link-exact-active .icon2 {
  background-image: url(./img/shujia_active.png);
}

.nav-item.router-link-exact-active .icon3 {
  background-image: url(./img/collection_active.png);
}

.nav-item.router-link-exact-active .icon4 {
  background-image: url(./img/geren_active.png);
}

.bottom {
  background-color: #ffffff;
  border-top: #ffd89c 1px solid;
  width: 110vw;
  bottom: 0px;
  transform: translate(-5%);
  height: 60px;
  position: fixed;
  display: flex;
  z-index: 100;

  .nav-item {
    font-weight: bold;
    color: #8b8b8b;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &.router-link-exact-active {
      color: #ff9807;
    }
  }

  span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
  }

  span {
    font-size: 14px;
  }
}
</style>

<script>
export default {
  data() {
    return {
      isShow: true,
      active: true,
    }
  },
  created() {
    let $rote = this.$route;
    this.isShow = $rote.meta.isShow;
  }
}
</script>